<!--
  * 操作记录 详情
  * 
-->
<template>
  <a-modal :visible="visible" title="请求详情" width="60%" :footer="null" @cancel="close">
    <div class="info-box">
      <a-row class="smart-margin-top10">
        <a-col :span="16">
          <a-row class="detail-info">
            <a-col :span="12"> 请求地址： {{ detail.accessDeptName }}</a-col>
            <a-col :span="12"> 请求用户： {{ detail.accessUserName }}</a-col>
          </a-row>
          <a-row class="detail-info">
            <a-col> 请求地址： {{ detail.accessUrl }}</a-col>
          </a-row>
          <a-row class="detail-info">
            <a-col :span="10"> 用户IP: {{ detail.accessIp }}</a-col>
            <a-col :span="7"> 时长： {{ detail.connectInterval }}</a-col>
            <a-col :span="7"> 是否成功：{{ detail.success==='Y' ? '成功' : '失败' }}</a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="info-box">
      <h4>请求参数：</h4>
      <JsonViewer :value="detail.reqParams ? JSON.parse(detail.reqParams) : ''" theme="jv-dark" copyable boxed sort />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { JsonViewer } from 'vue3-json-viewer';

  defineExpose({
    show,
  });

  const visible = ref(false);
  const formDefault = {
    accessDeptName: undefined,
    accessUserName: undefined,
    accessUrl: undefined,
    accessIp: undefined,
    connectInterval: undefined,
    success: undefined,
    reqParams: undefined,
  };
  let detail = reactive({ ...formDefault });

  function show(record) {
    visible.value = true;
    if(record)
      Object.assign(detail, record);
  }

  function close() {
    visible.value = false;
  }

</script>

<style scoped lang="less">
  .detail-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
  }
  .info-box {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 8px;
  }
  .detail-info {
    .ant-col {
      line-height: 1.46;
      margin-bottom: 12px;
      padding-right: 5px;
    }
  }
  .detail-right-title {
    text-align: right;
    color: grey;
  }

  :deep(.ant-modal-body) {
    padding: 10px !important;
  }

  .detail-right {
    padding-left: 5px;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
  }

  .success {
    color: @success-color;
  }

  .error {
    color: @error-color;
  }
</style>
